<template>
<div>
  <swiper
    ref="mySwiper"
    :options="swiperOptions"
    :auto-update="true"
  >
    <swiper-slide class="lock-wrapper">
      <div class="lock lock1">
        <div class="lock-mask"></div>
      </div>
    </swiper-slide>
    <swiper-slide class="lock-wrapper">
      <div class="lock lock2">
        <div class="lock-mask"></div>
      </div>
    </swiper-slide>
    <swiper-slide class="lock-wrapper">
      <div class="lock lock3">
        <div class="lock-mask"></div>
      </div>
    </swiper-slide>
    <swiper-slide class="lock-wrapper">
      <div class="lock lock4">
        <div class="lock-mask"></div>
      </div>
    </swiper-slide>
    <swiper-slide class="lock-wrapper">
      <div class="lock lock5">
        <div class="lock-mask"></div>
      </div>
    </swiper-slide>
  </swiper>
  <div class="pwd-container">
    <div class="pwd-wrapper" >
      <a-avatar :size="124" icon="user" />
      <div class="username">{{user.name}}</div>
      <a-form @submit="onSubmit" :form="form">
        <a-form-item>
          <a-input
            autoFocus
            size="large"
            placeholder="请输入登录密码"
            type="password"
            v-decorator="rule"
          >
            <a-button
              slot="addonAfter"
              type="primary"
              shape="circle"
              icon="arrow-right"
              html-type="submit"
              :loading="load"
            >
            </a-button>
          </a-input>
        </a-form-item>
      </a-form>

    </div>
  </div>
</div>
</template>

<script>
// import 'swiper/swiper-bundle.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'

import { mapGetters, mapMutations } from 'vuex'

export default {
  // components: {
  //   swiper,
  //   swiperSlide
  // },
  methods: {
    ...mapMutations('account', ['setLockFlag']),
    onSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err) => {
        if (!err) {
          const password = this.form.getFieldValue('password')
          if (this.lockPwd === password) {
            this.setLockFlag('')
            this.$router.push('/home')
          } else {
            this.form.setFields({
              password: { errors: [new Error('密码不正确')] }
            })
          }
        }
      })
    }
  },
  data () {
    return {
      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        }
      },
      timeId: null,
      load: false,
      form: this.$form.createForm(this),
      rule: [
        'password',
        {
          rules: [
            { required: true, message: '请输入登录密码', whitespace: true }
            // { validator: (rule, value, callback) => {
            //   if (this.lockPwd === value) {
            //     callback()
            //   } else {
            //     callback(new Error('密码不正确!'))
            //   }
            // }, message: '密码不正确', whitespace: true },
          ]
        }
      ]
    }
  },
  computed: {
    ...mapGetters('account', ['user', 'lockPwd']),
    swiper () {
      return this.$refs.mySwiper.$swiper
    },
    height () {
      return window ? window.innerHeight : 0
    }
  },
  mounted () {
    // console.log('autoplay', this.$refs.mySwiper, this.swiper)
    this.timeId = setInterval(() => {
      this.swiper.slideNext()
    }, 5000)
    // setTimeout(() => {
    //   this.setLockFlag('true')
    // }, 600)
  },
  destroyed () {
    clearInterval(this.timeId)
  }
}
</script>

<style lang="less" >
.pwd-container {
  position: fixed;
  top: 30%;
  left: calc(50% - 100px);
  z-index: 1;
.ant-form-explain{
  margin-top: 8px;
  color: white;
}

  .pwd-wrapper {
    width: 200px;
    text-align: center;

    .username {
      color: white;
      margin-top: 21px;
      margin-bottom: 29px;
      text-shadow: 0px 0px 4px 0px #000000;
      font-size: 18px;
    }

    .ant-input {
      border-radius: 40px;
      padding-right: 41px;
      &:hover{
        color: @primary-color;
      }
    }

    .ant-input-group-addon {
      position: absolute;
      right: 34px;
      top: 4px;
      padding: 0;
      z-index: 1;
      border: none;
    }
  }

}

.lock-wrapper {
  height: 100vh;
  background: rgba(0,0,0,0.40);
}

.lock {
  height: 100vh;
  background-repeat: no-repeat;
  background-position-x: left;
  background-size: cover;
  /* background-size: 100% 100%; */
}

.lock1 {
  background-image: url('/img/lock1.jpg');
}

.lock2 {
  background-image: url('/img/lock2.jpg');
}

.lock3 {
  background-image: url('/img/lock3.jpg');
}

.lock4 {
  background-image: url('/img/lock4.jpg');
}

.lock5 {
  background-image: url('/img/lock5.jpg');
}

.lock-mask {
  height: 100vh;
  width: 100vw;
  background: rgba(0,0,0,.4);
}

</style>
